import React, { Component } from 'react';
import './Navbar.css';
// import { connect } from "react-redux";
import {  mapState,mapDispatch} from "../../store/bindState";
class Navbar extends Component {
    constructor(props) {
        super(props)
        // console.log(this.props.items);
        this.state = {
            
        }
    }
    
    changeBarIndex(index){
        console.log(index);
        console.log(this.props);
        this.props.changeBarIndex(index);
         // 实现页面跳转
        this.props.history.replace(this.props.items[index].path);
    }
render() {
        return (
        <div>
            {this.props.isTabBarShow ? 
            <div className="nav_body">
                <div className="header-nav">
                <i className="iconfont icon-fenlei"></i>
                    <p>云音悦</p>
                    <i className="iconfont icon-sousuo"></i>
                </div>
                
                <div className="nav">
                { this.props.items.map((item,index)=>{
                    return (
                        <div key={index} className={this.props.selectBarIndex === index ? 'active' : null} onClick={this.changeBarIndex.bind(this,index)}>
                            {item.title}
                        </div>
                    )
                    })
                } 
            
                </div>
            </div>
            :null } 
        </div>
            
        );
    }
}
export default mapDispatch(mapState(Navbar,['selectBarIndex','isTabBarShow']),[{type:"changeBarIndex",params:true}]) ;